<script>
//图片组件工具栏
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import DeleteCard from './DeleteCard.js';

export default {
  name: 'ImageToolbar',
  mixins: [DeleteCard],
  props: {
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      //图片缩放模式枚举
      imageScaleModes: [
        {
          key: 'stretch',
          value: '适应尺寸',
        },
        {
          key: 'origin',
          value: '原始尺寸',
        },
        {
          key: 'uniform',
          value: '等比适应',
        },
      ],
      //选择的缩放模式
      scaleMode: 'stretch',
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
    control() {
      return this.controls[this.chartId];
    },
  },
  created() {
    this.scaleMode = this.control.options.scaleMode;
  },
  methods: {
    //重置图片
    resetImage() {
      this.control.options.url = '';
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
    //设置图片URL
    setUrl(e) {
      this.control.options.url = e.target.value;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
    //设置图片缩放模式
    setScaleMode() {
      this.control.options.scaleMode = this.scaleMode;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
    //设置图片标题
    setTitle(e) {
      this.control.chartName = e.target.value;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: this.control },
      });
    },
  },
};
</script>
<template>
  <div class="img-item-toolbar">
    <div>
      <Icon
        type="refresh"
        title="重新上传"
        @click.native="resetImage"/>
      <Poptip
        placement="bottom"
        width="260">
        <Icon
          type="link"
          title="设置链接" />
        <div slot="content">
          <Input
            :value="control.options.url"
            size="small"
            placeholder="输入图片地址..."
            @on-blur="setUrl">
          </Input>
        </div>
      </Poptip>
      <Poptip
        placement="bottom"
        width="200">
        <Icon
          type="compose"
          title="设置标题" />
        <div slot="content">
          <Input
            :value="control.chartName"
            size="small"
            placeholder="输入图片标题..."
            @on-blur="setTitle"></Input>
        </div>
      </Poptip>
      <Poptip
        placement="bottom">
        <Icon
          type="crop"
          transfer
          title="图片尺寸" />
        <div slot="content">
          <RadioGroup
            v-model="scaleMode"
            @on-change="setScaleMode">
            <Radio
              v-for="item in imageScaleModes"
              :key="item.key"
              :label="item.key">
              {{ item.value }}
            </Radio>
          </RadioGroup>
        </div>
      </Poptip>
      <Icon
        type="android-expand"
        title="全屏" />
      <Icon
        type="close"
        title="删除"
        @click.native.stop="deleteCard" />
    </div>
  </div>
</template>

<style lang="less">
.img-item-toolbar {
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
  cursor: default;
  .k-icon {
    color: #666666;
    font-size: 18px;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .k-poptip-body-content {
    overflow-y: hidden;
  }
  .k-radio-wrapper {
    margin-right: 4px;
  }
}
</style>
